import LogoTitle from "@src/components/LogoTitle";
import {
  AppEachTypeContainer,
  AppFullTypeContainer,
  AppEachTypeWithLogoContainer,
} from "./applayout-styled";
import AppInfo from "./config";
import { Children, useEffect, useState } from "react";
import { Button, Modal } from "antd";
import "./index.css";
const ThirtyApp: React.FC<{}> = (props) => {
  const [visible, setvisiible] = useState(false);
  const [appIntroduction, setappIntroduction] = useState(null);
  const [appconfig, setappconfig] = useState(null);
  const [appLink, setappLink] = useState(null);
  const [appName, setappName] = useState(null);
  // useEffect(() => {
  //   document.addEventListener("keydown", (event) => {
  //     // console.log("event.code", event.code);
  //     const modal = document.getElementsByClassName("ant-modal-content")[0];
  //     if (modal) {
  //       modal.setAttribute("style", "height: 613px !important");
  //       modal.setAttribute("style", "width: 1080px !important");
  //       console.log("moadl1");
  //     }
  //   });

  //   const modal = document.getElementsByClassName("ant-modal-content")[0];
  //   if (modal) {
  //     modal.setAttribute("style", "height: 523px !important");
  //     modal.setAttribute("style", "width: 929px !important");
  //   }
  //   console.log("moadl");
  // }, [visible]);

  const AppTypeList: Array<string> = Object.keys(AppInfo);
  const AppTypeListComponent: Array<JSX.Element> = [];

  if (Array.isArray(AppTypeList)) {
    for (let apptype of AppTypeList) {
      let AppEachTypeListComponent: Array<JSX.Element> = [];
      // console.log(apptype);
      // const apptype: string = AppTypeList[0];
      const eachTypeInfo = AppInfo[apptype];
      const eachTypeAppList = Object.keys(eachTypeInfo);
      // console.log(eachTypeAppList);
      if (eachTypeAppList.length) {
        eachTypeAppList.forEach((item, index) => {
          // console.log("eachTypeInfo[item]", eachTypeInfo[item]);

          // if(index>3)return
          AppEachTypeListComponent.push(
            <LogoTitle
              onClick={() => {
                setvisiible(true);
                // console.log("item", eachTypeInfo[item]);
                setappIntroduction(eachTypeInfo[item]["introduction"]);
                setappconfig(eachTypeInfo[item]["config"]);
                setappLink(eachTypeInfo[item]["link"]);
                setappName(eachTypeInfo[item]["name"]);
                // window.open(eachTypeInfo[item], "target", "");
              }}
              //
              key={item}
              src={`assets/img/app-icon/${apptype}/${item}.png`}
              title={item}
              color="#FFF"
              // titlesize={13}
              // imgsize="4.5rem"
              imgsize="3.8vw"
              titlesize="0.7vw"
              titlestylewidth="85px"
              direction="column"
              contentposition="center"
              justifyoffset="0.5vw"
              // justifyoffset="10px"
              betweendistance="0.2vw"
              // betweendistance="5px"
            />
          );
        });
        let AppEachTypeComponent: JSX.Element = (
          <AppEachTypeWithLogoContainer>
            {/* <div style={{width:"100px",height:"70px"}}></div> */}
            <LogoTitle
              // src="@src/assets/img/南京工业大学logo.png"
              src="assets/img/left-icon.png"
              title={apptype + "域"}
              color="#FFF"
              direction="row"
              contentposition="center"
              imgsize="1vw"
              titlesize="0.8vw"
              // titlesize={15}
              // imgsize="1.5rem"
              contentwidth="100%"
              contentheight="20%"
              // contentwidth="100%"
              // contentheight="20%"
              justifyoffset="0.5vw"
              betweendistance="0.1vw"
              // justifyoffset="10px"
              // betweendistance="1px"
            />
            <AppEachTypeContainer>
              {AppEachTypeListComponent}
            </AppEachTypeContainer>
          </AppEachTypeWithLogoContainer>
        );
        AppTypeListComponent.push(AppEachTypeComponent);
      }
    }
  }

  return (
    <>
      <AppFullTypeContainer>{AppTypeListComponent}</AppFullTypeContainer>
      <Modal
        // className="modal"
        // centered
        visible={visible}
        // width={928}
        onOk={() => setvisiible(false)}
        onCancel={() => setvisiible(false)}
        // style={{
        //   top: 90,
        //   left: -630,
        // }}
        style={{
          // top: 80,
          // left: -560,
          top: 65,
          left: -390,
          // left: 0,
        }}
        footer={null}
      >
        <h1>APP简介</h1>
        <p>{appIntroduction}</p>
        <br />
        <h1>APP配置项</h1>
        <p>{appconfig}</p>
        <br />
        <h1>实施案例</h1>
        <Button
          type="primary"
          onClick={() => {
            window.open(appLink + "", "target", "");
            setvisiible(false);
          }}
        >
          {appName}
        </Button>
      </Modal>
    </>
  );
};
export default ThirtyApp;
